import React from "react";
import { useState } from "react";
import logo from "../logo.svg";
import "./style/sidebar.css";

function Sidebar() {
  const items1 = [
    "Dashboard",
    "Insights",
    "Teams",
    "Projects",
    "Goals",
    "Share",
    "Leaderboards",
    "Integrations",
    "Supported IDEs",
  ];

  const items2 = [
    "Blog",
    "API Docs",
    "Pricing",
    "Referrals",
    "Community",
    "FAQ",
    "Plugin Status",
    "About",
  ];

  const [curIdx, setCurIdx] = useState(0);
  
  const [isHover, setIsHover] = useState(false);
  const normal = {
    borderLeft: "3px solid transparent",
  };
  const active = {
    borderLeft: "3px solid #00acac",
    backgroundColor: "rgba(255, 255, 255, 0.175)",
  };

  // const handleHover = (e) => {
  //   setIsHover(true);
  //   console.log(e);
  // };
  // const handleLeave = (e) => {
  //   setIsHover(false);
  //   console.log(e);
  // };

  const handleClick = (i) => {
    setCurIdx(i);
  };

  return (
    <div className="flex flex-col relative h-full">
      <div className="flex items-center px-4 py-2 text-white" style={{backgroundColor: "#23282e"}}>
        <div className="flex flex-row flex-1 items-center">
          <img src={logo} className="w-8 h-8" />
          <a href="#" className="font-mono font-bold">WakaTime</a>
        </div>
      </div>
      <ul className="nav-ul ">
        {items1.map((item, i) => (
          <li
            className={["nav-li", curIdx === i ? "active" : "normal"].join(" ")}
            // TODO: add inline style :hover
            // style={
              // curIdx === i ? active : normal
              // isHover ? active : normal
            // }
            key={i}
            onClick={() => handleClick(i)}
            // onMouseEnter={(e) => handleHover(e)}
            // onMouseLeave={(e) => handleLeave(e)}
          >
            <a href="#" className="flex items-center py-2 pr-1">
              <img src={logo} className="w-6 h-6" />
              <div className="pl-1 text-white text-sm font-bold">{item}</div>
            </a>
          </li>
        ))}
      </ul>
      <ul className="nav-ul absolute w-full bottom-4">
        {items2.map((item, i) => (
          <li className="nav-li pl-4" key={i}>
            <a href="#" className="flex items-center py-1 pr-1">
              <div className="text-white text-sm">{item}</div>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Sidebar;
